<script setup lang="ts">
import { computed, ref } from 'vue';
import { $t } from '@/locales';
import { useForm, useFormRules } from '@/hooks/common/form';
import { ApiSysFilesQuery, ApiUserQuery } from '@/api-services';
import { NetoKit } from '@/typings/neto';

defineOptions({
  name: 'LocalFileSearch'
});

interface Emits {
  (e: 'reset'): void;
  (e: 'search'): void;
}

const emit = defineEmits<Emits>();

const { formRef, validate, restoreValidation } = useForm();

type SearchModel = NetoKit.NullToUndefined<ApiSysFilesQuery>;
const model = defineModel<SearchModel>('model', { required: true });
// type RuleKey = Extract<keyof ApiSysFilesQuery, 'userEmail' | 'userPhone'>;

// const rules = computed<Record<RuleKey, App.Global.FormRule>>(() => {
//   const { patternRules } = useFormRules(); // inside computed to make locale reactive

//   return {
//     email: patternRules.email,
//     phone: patternRules.phone,

//   };
// });

const datetimepickerGroupRef = ref();
async function reset() {
  await restoreValidation();
  //清空日期,但是现在不知道为什么清空不了
  //datetimepickerGroupRef.value.reset();
  emit('reset');
}

async function search() {
  await validate();
  emit('search');
}

// 添加一个计算属性来处理 isEnable 的布尔值到字符串的映射
// const isEnableString = computed({
//   get: () => {
//     switch (model.value.isEnable) {
//       case true: return '1';
//       case false: return '0';
//       default: return undefined;
//     }
//   },
//   set: (value) => {
//     switch (value) {
//       case '0': model.value.isEnable = false; break;
//       case '1': model.value.isEnable = true; break;
//       default: model.value.isEnable = undefined; break;
//     }
//   }
// });
</script>

<template>

  <ElCard class="card-wrapper" :header="$t('common.search')">

    <ElSpace>

      <ElFormItem :label="$t('common.timeRange')" style="max-width: 600px;">
        <DatetimepickerGroup ref="datetimepickerGroupRef" v-model:start-time="model.startDate"
          v-model:end-time="model.endDate">
        </DatetimepickerGroup>
      </ElFormItem>



      <ElFormItem :label="$t('common.keyword')" name="keyWords" style="max-width: 300px;">
        <ElInput v-model="model.keyWords!" :placeholder="$t('common.keywordSearch')" />
      </ElFormItem>

    </ElSpace>
    <ElSpace class="w-full justify-end" alignment="end">
      <ElButton @click="reset">
        <template #icon>
          <icon-ic-round-refresh class="text-icon" />
        </template>
        {{ $t('common.reset') }}
      </ElButton>
      <ElButton type="primary" plain @click="search">
        <template #icon>
          <icon-ic-round-search class="text-icon" />
        </template>
        {{ $t('common.search') }}
      </ElButton>
    </ElSpace>

  </ElCard>
</template>

<style scoped></style>
